<script setup>
import { ref, reactive } from 'vue'

const Props = defineProps({
  // 枚举数据
  FormList: {
    type: Array,
    default: () => []
  },
  //   校验
  Rules: {
    type: Object,
    default: () => {}
  },
  //   回显
  Form: {
    type: Object,
    default: () => {}
  },
  //    是否显示按钮
  Btn: {
    type: Boolean,
    default: false
  },
  loading: {
    type: Boolean,
    default: false
  }
})

// 保存按钮加载
const BtnLoading = ref(false)

// 此文件 数据表单
let ruleForm = reactive({})

const ruleFormRef = ref(null)

Props.FormList.forEach(item => {
  ruleForm[item.model] = ''
})
ruleForm = Props.Form
const Emit = defineEmits(['reset', 'submit'])

// 下拉选择时
const SelectChange = val => {
  // console.log(val)
}

// 时间范围选择时
const TimeChange = val => {
  ruleForm[val] = ruleForm.Time.join(',')
  Emit('TimeChange', ruleForm[val])
  // console.log(ruleForm[val])
}

// 提交
const Submit = () => {
  return new Promise(async (j, v) => {
    await ruleFormRef.value.validate((valid, fields) => {
      if (valid) {
        j(ruleForm)
        BtnLoading.value = true
        Emit('submit', ruleForm)
      } else {
        j(false)
        BtnLoading.value = false
        // console.log('error submit!', fields)
      }
    })
  })
}
const PmsSubmit = () => {
  return new Promise(async (j, v) => {
    await ruleFormRef.value.validate((valid, fields) => {
      if (valid) {
        j(ruleForm)
        BtnLoading.value = true
        Emit('submit', ruleForm)
      } else {
        j(false)
        BtnLoading.value = false
        // console.log('error submit!', fields)
      }
    })
  })
}
// console.log(Props.Rules)
// 重置查询条件
const reset = () => {
  Emit('reset')
}
defineExpose({ Submit })
</script>
<template>
  <div>
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :inline="true"
      :rules="Props.Rules"
      label-width="auto"
      label-position="right"
      class="demo-ruleForm"
      status-icon
    >
      <div style="display: inline" v-for="(item, index) in Props.FormList" :key="index">
        <el-form-item :label="item.label" :prop="item.model">
          <!-- 输入 -->
          <el-input
            :disabled="item.disabled"
            clearable
            v-model="ruleForm[item.model]"
            v-if="item.type === '输入框'"
            :placeholder="item.placeholder || '请输入内容'"
          />
          <div v-if="item.type === '备注框'">
            <!-- 备注框 -->
            <el-input
              autosize
              clearable
              v-model="ruleForm[item.model]"
              :rows="2"
              type="textarea"
              :placeholder="item.placeholder || '请输入内容'"
              :input-style="{ width: '100%' }"
            />
          </div>

          <!-- 下拉 -->
          <el-select
            v-model="ruleForm[item.model]"
            :disabled="item.disabled"
            clearable
            :placeholder="item.placeholder || '请选择'"
            v-if="item.type === '下拉单选'"
            @change="SelectChange"
          >
            <el-option v-for="(item, index) in item.opt" :key="index" :label="item.label" :value="item.value" />
          </el-select>
          <!-- 时间范围 -->
          <el-date-picker
            :disabled="item.disabled"
            style="width: 220px"
            v-if="item.type === '日期范围'"
            v-model="ruleForm.Time"
            type="daterange"
            range-separator="-"
            start-placeholder="开始"
            end-placeholder="结束"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            @change="TimeChange(item.model)"
          />
          <el-switch :disabled="item.disabled" v-if="item.type === '开关'" v-model="ruleForm.Time" />
        </el-form-item>
      </div>
    </el-form>
    <!-- 按钮 -->
    <div class="Btn" v-if="Props.Btn">
      <el-button :loading="Props.loading" type="primary" @click="Submit">保存</el-button>
      <el-button @click="Emit('reset')">取消</el-button>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.Btn {
  float: right;
  min-width: 160px;
}
</style>
